<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="list"></ul>
    <script>
        const arr = [
            {name: "小明", age: 12, sex: "男"},
            {name: "小红", age: 11, sex: "女"},
            {name: "小强", age: 13, sex: "男"},
        ]

        const list = document.querySelector('#list');

        arr.forEach(people => {
            const oli = document.createElement('li');
            const hdDiv = document.createElement('div');
            const bdDiv = document.createElement('div');
            const p1 = document.createElement('p');
            const p2 = document.createElement('p');
            const p3 = document.createElement('p');

            hdDiv.innerText = `${people.name}的基本信息`;

            p1.innerText = `姓名：${people.name}`;
            p2.innerText = `年龄：${people.age}`;
            p3.innerText = `性别：${people.sex}`;

            hdDiv.append(p1);
            hdDiv.append(p2);
            hdDiv.append(p3);

            oli.append(hdDiv);1
            oli.append(bdDiv);
            list.append(oli);
        });

    </script>
</body>
</html>